<template>
    <el-form :model="state.form" :inline="true" class="my-form" label-position="right" label-width="90px">
      <el-form-item label="用户编号">
        <el-input clearable v-model="state.form.user_no" style="width: 145px;" placeholder="请输入用户编号" />
      </el-form-item>
      <el-form-item label="卡号后4位">
        <el-input clearable v-model="state.form.card_end_four" style="width: 145px;" placeholder="请输入卡号后4位" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input clearable v-model="state.form.user_email" style="width: 145px;" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="状态">

      <el-select clearable v-model="state.form.user_status" placeholder="请选择用户状态" style="width: 145px;">
        <el-option :label="val" :value="key" v-for="(val,key) in state.status" :key="key"/>
      </el-select>

    </el-form-item>

      <el-form-item label="注册日期">
        <el-date-picker style="width: 385px;" v-model="state.selectData" :editable="false" start-placeholder="结束时间"
          end-placeholder="结束时间" type="daterange" range-separator="至" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="isLoading" icon="Search">搜索</el-button>
        <!-- <el-button type="primary" @click="onExport" :loading="isExporting" icon="Download">导出</el-button> -->
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { reactive, watchEffect } from 'vue'
  import { useCommonStore } from '@/stores';
  
  const props = defineProps({
    isLoading: {
      type: Boolean,
      default: false
    },
    isExporting: {
      type: Boolean,
      default: false
    }
  })
  
  const emit = defineEmits(['search', 'export'])
  
  const commonStore = useCommonStore();
  
  const state = reactive({
    form: {
      user_no: '',
      card_end_four: '',
      user_email: '',
      user_status: '',
      start_time: '',
      end_time: '',
    },
    status: { 1 : '正常' , 2 : '异常'},
    type: [],
    selectData: ''
  })
  
  
  watchEffect(() => {
    if (state.selectData) {
      state.form.start_time = state.selectData[0]
      state.form.end_time = state.selectData[1]
    } else {
      state.form.start_time = ''
      state.form.end_time = ''
    }
  })
  
  // methods
  const onSubmit = () => {
    emit('search', state.form)
  }
  
  </script>
  
  <style lang="less" scoped>
  .my-form {
    padding: var(--el-main-padding);
    font-size: 16px;
  
    .text-center {
      text-align: center;
    }
  
    :deep(.el-form-item) {
      margin-right: 25px;
    }
  }
  </style>